<template>
    <new-search-panel :showAdvanced="true" @search="onSearch" @reset="onReset">
        <template #default>
            <a-col :md="24" :sm="24">
                <a-form-item label="参数名称">
                    <a-input :maxLength="35" v-model:value="queryParam.name" allow-clear placeholder="请输入参数名称" />
                </a-form-item>
            </a-col>
            <a-col :md="24" :sm="24">
                <a-form-item label="唯一编码">
                    <a-input :maxLength="35" v-model:value="queryParam.code" allow-clear placeholder="请输入唯一编码" />
                </a-form-item>
            </a-col>
            <a-col :md="24" :sm="24">
                <a-form-item label="所属分类">
                    <a-select v-model:value="queryParam.groupCode" allow-clear placeholder="请选择所属分类">
                        <a-select-option v-for="(item, index) in groupCodeDictTypeDropDown" :key="index" :value="item.code">
                            {{ item.value }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
        </template>
        <template #button>
            <a-button type="primary" @click="addconfig">
                <template #icon><PlusOutlined /></template>
                新增配置</a-button
            >
        </template>
    </new-search-panel>
    <dynamic-table
        :scrollX="1000"
        :fixed="true"
        :tableType="1"
        ref="tableRef"
        :columns="columns"
        :get-list-func="sysConfigPage"
        :queryParam="queryParam"
        rowKey="id"
    >
        <template #groupCode="{ text }">
            {{ groupCodeFilter(text) }}
        </template>
        <template #action="{ record }">
            <a @click="editForm(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm placement="topRight" title="确认删除？" @confirm="configDelete(record)">
                <a>删除</a>
            </a-popconfirm>
        </template>
    </dynamic-table>
</template>
<script lang="ts">
import { defineComponent, nextTick, reactive, toRefs, Fragment, onMounted, ref, computed } from 'vue'
import { message, Modal } from 'ant-design-vue'
import { useStore } from '@/store'
import { columns } from './columns'
// import { filterEnum } from '@/utils/common'
import { sysConfigPage, sysConfigAdd, sysConfigEdit, sysConfigDelete, sysDictTypeDropDown } from '@/api/system/config'
import { newSearchPanel, DynamicTable } from '@/components'
import { useFormModal } from '@/hooks/useFormModal'
import { getFormSchema } from './form-schema'

export default defineComponent({
    name: 'SystemConfig',
    components: {
        DynamicTable,
        newSearchPanel
    },
    setup() {
        // @ts-ignore
        const tableRef = ref<any>(null)
        const formRef = ref<any>(null)
        const store = useStore()
        const state = reactive({
            groupCodeDictTypeDropDown: [] as any,
            tableLoading: false,
            title: '',
            queryParam: {
                groupCode: null,
                name: '',
                code: ''
            },
            rowSelection: {
                onChange: (selectedRowKeys, selectedRows) => {
                    state.rowSelection.selectedRowKeys = selectedRowKeys
                },
                selectedRowKeys: []
            }
        })

        onMounted(() => {
            store.dispatch('enums/getEnum', 'consts_type').then((res) => {
                state.groupCodeDictTypeDropDown = res
            })
        })

        function groupCodeFilter(groupCode) {
            // eslint-disable-next-line eqeqeq
            // filter(item => item.code == groupCode) 将item.code通过字符方式获取对象属性：item['code']
            const values = state.groupCodeDictTypeDropDown.filter((item) => item['code'] == groupCode)
            if (values.length > 0) {
                return values[0].value
            }
        }

        /**
         * 查询
         */
        function onSearch() {
            tableRef.value.queryParam = state.queryParam
            tableRef.value.resetPagination()
            tableRef.value.refreshTableData()
        }

        /**
         * 重置
         */
        function onReset() {
            state.queryParam = {
                name: '',
                code: '',
                groupCode: null
            }
            // 重置分页
            onSearch()
        }
        //新增
        function addconfig() {
            useFormModal({
                title: '新增参数',
                formSchema: getFormSchema(),
                handleOk: async (modelRef, state) => {
                    await sysConfigAdd(modelRef)
                    message.success('新增成功')
                    tableRef.value.refreshTableData()
                }
            })
        }
        //编辑
        function editForm(record) {
            useFormModal({
                title: '编辑参数',
                formSchema: getFormSchema(),
                fields: record,
                handleOk: async (modelRef, state) => {
                    await sysConfigEdit(modelRef)
                    message.success('编辑成功')
                    tableRef.value.refreshTableData()
                }
            })
        }

        /**
         * 删除参数
         * @param record
         */
        function configDelete(record) {
            sysConfigDelete(record).then(() => {
                message.success('删除成功')
                tableRef.value.refreshTableData()
            })
        }

        return {
            ...toRefs(state),
            columns,
            tableRef,
            sysConfigPage,
            onSearch,
            onReset,
            groupCodeFilter,
            addconfig,
            editForm,
            formRef,
            configDelete
        }
    }
})
</script>

<style lang="less">
.table-operator {
    margin-bottom: 18px;
}
button {
    margin-right: 8px;
}
</style>
